<template>
	<view>
		<view class="head">
			<view class="flex" @click="navto('./info/info')">
				<view class="flex">
					<image style="border-radius: 50%;" :src="imgUrl + user.avatar" mode=""></image>
					<view>
						<view class="size-32">{{nickname || user.realname}}</view>
						<view class="size-24">特殊科室</view>
					</view>
				</view>
				<image src="../../static/set.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>
		<view class="content">
			<view class="ml-30 mt-25 size-28">我的功能</view>
			<view class="box">
				<view class="row flex" v-for="item in menuList" @click="navto(item.url)">
					<view class="flex">
						<image :src="item.img" mode=""></image>
						<view class="size-28 ml-20">{{brief || item.name}}</view>
					</view>
					<image src="../../static/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
					name: '扫一扫',
					img: '../../static/icon1.png',
					url: ''
				}, {
					name: '我的订单',
					img: '../../static/icon2.png',
					url: './order/order'
				}, {
					name: '我的排班',
					img: '../../static/icon3.png',
					url: '000'
				}, {
					name: '关于我们',
					img: '../../static/icon4.png',
					url: './about/about'
				}, {
					name: '医生停诊',
					img: '../../static/icon5.png',
					url: './close/close'
				}, {
					name: '退出登录',
					img: '../../static/icon6.png',
					url: ''
				}],
				user: {},
				nickname:'',
				brief:'',
				imgUrl:'http://xuanfuzhai.jiangkukeji360.com'
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('userInfo')
		},
		onShow() {
			this.nickname = uni.getStorageSync('nickname')
			this.brief = uni.getStorageSync('brief')
		},
		methods: {
			navto(url) {
				if (url == '') {
					uni.clearStorageSync()
					uni.reLaunch({
						url: '/pages/login/login'
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		min-height: 524rpx;
		background: #F8F8F8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -90rpx;
		overflow: hidden;
	}

	.box {
		width: 690rpx;
		height: 618rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 30rpx auto 0;
		padding: 0 30rpx;
	
	.row {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f8f8f8;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.row:last-child {
			border: none;
		}
	}

	.head {
		width: 100%;
		height: 300rpx;
		background-color: #882027;
		color: #fff;
		padding: 50rpx 50rpx 0;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: pink;
			margin-right: 20rpx;
		}
	}

	page {
		background-color: #f8f8f8;
	}
</style>
